<template>
  <common-card
    title="今日交易用户数"
    :value="orderUser"
  >
    <template>
      <v-chart :options="todayUsers"></v-chart>
      <div id="today-users-card" style="width : 100%;height : 100%;"></div>
    </template>
    <template v-slot:footer>
      <span>退货率 </span>
      <span class="emphasis">{{ returnRate }}</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
import { format, pct } from '@/utils'
import { todayUsers } from '@/api/axiosHttp'

export default {
  name: 'TodayUser',
  mixins: [commonCardMixin],
  data () {
    return {
      orderUser: 0,
      returnRate: 0,
      orderUserTrendAxis: [],
      orderUserTrend: []
    }
  },
  computed: {
    todayUsers () {
      return {
        color: ['#3398DB'],
        series: [
          {
            type: 'bar',
            data: this.orderUserTrend,
            barWidth: '60%'
          }
        ],
        xAxis: {
          type: 'category',
          data: this.orderUserTrendAxis,
          show: false,
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {}
      }
    }
  },
  created () {
    todayUsers().then(data => {
      const {
        orderUser,
        returnRate,
        orderUserTrendAxis,
        orderUserTrend
      } = data
      this.orderUser = format(orderUser)
      this.returnRate = pct(returnRate)
      this.orderUserTrendAxis = orderUserTrendAxis
      this.orderUserTrend = orderUserTrend
    })
  }

}
</script>
